<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" width="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">
    <title>学生信息管理系统</title>
    <!-- Bootstrap core CSS -->
    <link href="/public/css/main.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/public/css/main.css" rel="stylesheet">
    <style>
        /* 扩大"学生管理系统"字体大小 */
        .navbar-brand {
            font-size: 2em;
        }

        /* 修改页面整体背景色 */
        body {
            background: linear-gradient(to bottom, cadetblue, white);
        }

        /* 修改表格行的背景色交替效果 */
        .table-striped > tbody > tr:nth-of-type(odd) {
            background: linear-gradient(to right, #e6f7ff, #add8e6);
        }

        .table-striped > tbody > tr:nth-of-type(even) {
            background: linear-gradient(to right, #f0f9ff, #d1e8ff);
        }


        .btn-default {
            background-color: #ccc;
            color: #333;
        }

        .btn-success {
            background-color: antiquewhite;
            color: #428bca;
        }

        /* 增大搜索框样式 */
        .form-inline.form-control {
            width: 500px;
            padding: 15px;
            font-size: 1.2em;
        }

        /* 增大搜索按钮样式 */
        .btn-default {
            width: 120px;
            padding: 10px 20px;
            font-size: 1.2em;
        }

        /* 增大添加学生按钮样式 */
        .btn-success {
            width: 150px;
            padding: 10px 20px;
            font-size: 1.2em;
        }

        .page-header {
            text-align: center;
        }

        /* 调整布局，使表格在左边，搜索相关在右边 */
        .form-inline {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .table-responsive {
            margin-top: 20px;
            margin-right: 20px;
            flex: 1;
            min-width: 0;
        }

        table td,
        table th {
            font-size: 2em;
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="/login_register">登出</a>
    </div>
    <div class="row">
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-12 col-md-offset-2 main">
        <h1 class="page-header">128宿舍学生信息</h1>
        <div class="row placeholders">
            {{ each top }}
            <div class="col-xs-6 col-sm-4 placeholder">
                {{if $index === 0}}
                <img src="/public/img/1.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{else if $index === 1}}
                <img src="/public/img/2.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{else if $index === 2}}
                <img src="/public/img/3.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{else if $index === 3}}
                <img src="/public/img/4.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{else if $index === 4}}
                <img src="/public/img/5.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{else if $index === 5}}
                <img src="/public/img/6.jpg" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                {{/if}}
                <h4>{{ $value.name }}</h4>
                <span class="text-muted">{{ $value.hobbies }}</span>
            </div>
            {{ /each }}
        </div>
        <h2 class="sub-header">学生列表</h2>
        <form class="form-inline" action="/students">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>爱好</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{if count == 0}}
                    <tr>
                        <td colspan="6">未找到该姓名,请重新查询!</td>
                    </tr>
                    {{else}}
                    {{each students}}
                    <tr>
                        <td>{{ $index +1 }}</td>
                        <td>{{ $value.name }}</td>
                        {{if $value.gender==0 }}
                        <td>男</td>
                        {{else}}
                        <td>女</td>
                        {{/if}}
                        <td> {{ $value.age }}</td>
                        <td>{{ $value.hobbies }}</td>
                        <td>
                            <a href="/students/edit?id={{ $value.id }}">编辑</a>
                            <a href="javascript:if(confirm('确实要删除?'))location='/students/delete?id={{ $value.id }}'">删除</a>
                        </td>
                    </tr>
                    {{ /each }}
                    {{/if}}
                    </tbody>
                </table>
            </div>
            <div class="form-group">
                <label for="id" style="margin:5px;font-size: 1.2em;">搜索:</label>
                <input type="text" style="margin:2px;width: 150px; padding: 10px; font-size: 1.2em;" class="form-control" name="name" id="id" placeholder="请输入姓名">
            </div>
            <div class="form-inline">
                <button type="submit" class="btn btn-default" style="width: 100px;margin:5px">搜索</button>
                <a class="btn btn-success" href="/students/new">添加学生</a>
            </div>
        </form>
    </div>
</div>
</body>

</html>